<template>
	<view class="app-reservation-preview-order" :style="[AppSkinVar]">
		<e-loading-page :loading="loading||payLoading"   >
			<template #icon>
				<loader ></loader>
			</template>
		</e-loading-page>

		<view class="app-reservation-preview-order__box bg-white e-p-l-20 e-p-r-20">
			<view class="e-flex e-p-t-24 e-p-b-24 e-p-l-20">
				<text class="fw-600">{{ $t('classify.商品信息') }}</text>
			</view>
			<view class="e-flex e-p-t-20 e-p-b-40">
				<load-image mode="aspectFill" size="180rpx" :src="goodsInfo.servicePhoto">
				</load-image>

				<view class="e-m-l-20 e-flex-1">
					<view class="app-reservation-preview-order__title e-line-2 e-m-b-6">
						<text>{{ goodsInfo.serviceName }}</text>
					</view>
					<view class="e-m-b-10">
						<text class="c-secondary e-font-26">{{ goodsInfo.serviceSpec }}</text>
					</view>
					<view class="e-flex e-flex-between">
						<view>
							<text class="c-red e-font-24">{{ $unitEn }}</text>
							<text class="c-red e-font-32">{{ goodsInfo.servicePrice }}</text>
						</view>
						<text class="c-666 e-font-24">x{{ goodsInfo.qty }}</text>
					</view>
				</view>
			</view>
			<e-line color="#DFE3E6"></e-line>
			<view class="e-p-t-36 e-p-b-40">
				<view class="e-flex e-flex-between ">
					<text class="c-secondary">{{ $t('order.商品总价') }}</text>
					<text>{{ $unitEn }}{{ info.moneyAll }}</text>
				</view>
				<view class="e-flex e-flex-between e-p-t-34" v-if="info.appointmentType === 2">
					<text class="c-secondary">{{ $t('classify.上门费') }}</text>
					<text>{{ $unitEn }}{{ info.appointmentMoney }}</text>
				</view>
			</view>
			<e-line color="#DFE3E6"></e-line>
			<view class="e-p-t-22 e-p-b-22 e-flex e-flex-end">
				<text class="e-p-r-40">{{ $t('nearby.小计') }}</text>
				<text class="fw-600">{{ $unitEn }}{{ info.payMoney }}</text>
			</view>
		</view>
		<view class="app-reservation-preview-order__box  bg-white e-p-l-20 e-p-r-20">
			<view class="e-flex e-p-t-30 e-p-b-24">
				<text class="fw-600">{{ $t('classify.预约信息') }}</text>
			</view>
			<view class="e-flex e-flex-between e-m-b-20">
				<text class="c-secondary">{{ $t('classify.预约顾问') }}</text>
				<text>{{ info.staffName }}</text>
			</view>
			<template v-if="info.appointmentType === 2">
				<view class="e-flex e-flex-between e-m-b-20">
					<text class="c-secondary">{{ $t('classify.上门时间') }}</text>
					<text>{{ info.appointmentTime }} {{info.appointmentTimeStr}}</text>
				</view>
				<view class="e-flex e-flex-between e-m-b-20">
					<text class="c-secondary">{{ $t('classify.上门地址') }}</text>
					<text>{{ info.addressDetail }}</text>
				</view>
				<view class="e-flex e-flex-between e-m-b-20">
					<text class="c-secondary">{{ $t('classify.联系人') }}</text>
					<text>{{ info.staffName }}</text>
				</view>
			</template>
			<view class="e-flex e-flex-between e-m-b-40">
				<text class="c-secondary">{{ $t('classify.备注') }}</text>
				<text>{{ remarks }}</text>
			</view>
		</view>
		<view class="app-reservation-preview-order__box app-reservation-preview-order__mode bg-white">
			<view class="e-flex e-p-t-24 e-p-b-24 e-p-l-20">
				<text class="fw-600">{{ $t('classify.选择支付方式') }}</text>
			</view>
			<view>
				<view class="app-reservation-preview-order__mode__item e-flex e-flex-between"
					v-for="item in payMode" :key="item.id" @tap="handleSelectPayMode(item)">
					<view class="e-flex">
						<view class="e-m-r-20">
							<load-image size="60rpx" :src="item.icon">
							</load-image>
						</view>
						<text class="e-font-30">{{ item.name }}</text>
					</view>
					<view class="e-flex">
						<text class="c-secondary e-p-r-24"
							v-if="item.type === 'SYS' && item.money">{{ item.money }}{{ $t('nearby.可用') }}</text>
						<radio :color="AppSkin.primary" :value="`${item.id}`" :checked="payModeId === item.id"
							@tap.stop="handleSelectPayMode(item)" />
					</view>
				</view>
			</view>
		</view>

		<view class="app-reservation-preview-order__btn e-flex bg-white">
			<button class="bg-primary c-white" @tap="buy">{{ $t('classify.去支付') }}</button>
		</view>
		<password-popup ref="passwordPopupRef" :payMoney="info.payMoney" :show="passwordShow"
			@close="passwordShow = false" @confirm="pay"></password-popup>
			<card-valid-code-popup :show="cardValidCodePopupShow" :payMoney="info.payMoney" @cancel="handleCancelCardPay" @confirm="handleCardPay"></card-valid-code-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import {
		getGoodsAppointmentPreviewOrderInfo,
		getPaymode,
		postPurchaseGoodsAppointment,
		getPayResult
	} from '@/common/request/api'
	import type { PaymodeItem, AppointmentPreviewOrderData } from '@/common/request/api'
	import {
		DEFAULT_ACCOUN_SHOW,
		PAYTYPE
	} from '@/env'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import { usePay } from '../../hooks/usePay'
	import CardValidCodePopup from '../../child/cardValidCodePopup.vue'
	import type { UniGlobalData } from '@/typings/uni'
	import { PayType } from '@/env'
	import type { PasswordPopupInstance } from '@/typings/components'
	import {
		throttle
	} from '@/common/utils'

	const props = defineProps<{
		qty : string
		skuId : string
		classId : string
		staffId : string
		wordTime : string
		remarks : string
		appointmentType : string
		cardId ?: string
		receivedId ?: string

	}>()

	const {
		payLoading,checkCardPay,handleCardPay,
		handleCancelCardPay,cardValidCodePopupShow,
		systemPay,
		getH5PayResult } = usePay()

	const payType = ['SYS']
	PAYTYPE.split(',').forEach(item => {
		payType.push(item)
	})
	const payTypes = payType.join(',')

	const info = ref<AppointmentPreviewOrderData>()

	const goodsInfo = computed(() => {
		return {
			servicePhoto: info.value?.servicePhoto,
			serviceName: info.value?.serviceName,
			serviceSpec: info.value?.serviceSpec,
			servicePrice: info.value?.servicePrice,
			qty: props.qty
		}
	})

	const loading = ref(true)
	const payMode = ref<PaymodeItem[]>([])



	const payModeId = ref(-1)
	let _payType : PayType
	const getData = () => {
		loading.value = true
		getGoodsAppointmentPreviewOrderInfo(props).then(res => {
			info.value = res.data
		}).finally(() => {
			loading.value = false
		})
	}
	const handleSelectPayMode = (data : PaymodeItem) => {
		payModeId.value = data.id
		_payType = data.type
	}
	const passwordShow = ref(false)
	const buy = throttle(function () {
		passwordShow.value = true
	}, 1000)
	const passwordPopupRef = ref<PasswordPopupInstance>()
	// 支付
	const pay = async (payword ?: string,bankId?:number) => {
		let params = {
			...props,
			payword,
			payId: payModeId.value,
			fromType: getApp<UniGlobalData>().globalData?.payFromType,
			bankId
		}
		passwordPopupRef.value?.reset()
		passwordShow.value = false
		if(!bankId&&checkCardPay(_payType,(cardId:number) => {
			pay(payword,cardId)
		})){
			return 
		}
		uni.hideLoading();
		const res = await postPurchaseGoodsAppointment(params)
		payLoading.value = false
		await systemPay({
			payType: _payType,
			resolveData: res,
			payParams: res.data,
			api: getPayResult,
			storageKey: 'payAppointmentOrderId',
			payMoney:info.value.payMoney,
			successUrl: (id : string) => `order/success?type=4&pageType=1&id=${id}`,
			errorUrl: (msg : string) => `order/error?msg=${msg}`,
		})
		// if (this.params.type == 2) {
		// 	this.getCart()
		// }
	}


	onLoad(() => {
		getData()
		// #ifdef HTML5 || PREVIEW
		getH5PayResult('order/success', 'payOrderId', getPayResult)
		// #endif

		let data : Parameters<typeof getPaymode>[0] = {
			doType: '1',
			payType: payTypes,
			fromType: getApp<UniGlobalData>().globalData?.payFromType,
			type:2
		}
		if (!DEFAULT_ACCOUN_SHOW) {
			data['isDefault'] = 'N'
		}
		getPaymode(data).then(res => {
			payMode.value = res.data
			const item = res.data.find(item => item.isDefault)

			item && handleSelectPayMode(item)

		}).finally(() => {
			loading.value = false
		})


	})
</script>

<style lang="scss" scoped>
	@include appBem_b(reservation-preview-order) {
		padding: 20rpx 20rpx 140rpx 20rpx;

		@include appBem_e(title) {
			height: 80rpx
		}

		@include appBem_e(box) {
			border-radius: 20rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
		}

		@include appBem_e(mode) {
			padding-bottom: 10rpx;

			&__item {
				padding: 20rpx;
				position: relative;
				margin-bottom: 10rpx;

			}
		}

		@include appBem_e(btn) {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 140rpx;
			z-index: 1;
			padding: 0 40rpx;

			button {
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 40rpx;
				margin: 0;
			}
		}



	}
</style>